<template>
    <div class="combo">
        <!-- <van-row align="center">
            <van-col span="8">打蜡服务：</van-col>
            <van-col span="10">x2次</van-col>
            <van-col span="6">过期时间：2021-09-10</van-col>
        </van-row> -->
        <div class="comboinfo" v-for="cc in comboInfo" :key="cc.orderId">
            <!-- <div class="title">套餐信息</div> -->
            <div class="surplus" v-for="c in cc.products" :key="c.uid">
                <span>{{c.name}}:</span>
                <div>
                     <p v-for="c2 in cc.cancelList" :key="c2.id"><span>{{c2.projectName}}</span> <span>{{c2.mayCancelNumber}}{{c2.quantityUnit}}</span></p>
                     <!-- <p><span>洗车服务(￥10)</span> <span>2次</span></p> -->
                </div>
            </div>
            <div class="buy"><span>购买日期: </span> <span>{{cc.addtime}}</span></div>
            <!-- <div class="day"><span>过期时间:</span> <span>2021-09-12  18:00:00</span></div> -->
        </div>
    </div>
</template>
<script>
import {ref} from 'vue';

export default {
    props:{
        comboInfo:Array
    },
    setup(props) {
    },
}
</script>
<style lang="scss" scoped>
.combo{
    background: #F1F5F8;
    .comboinfo{
        background: #FFFFFF;
        border-radius: 1.25rem /* 20/16 */;
        text-align: left;
        padding:.3125rem /* 5/16 */ .9375rem /* 15/16 */;
        font-size:.875rem /* 14/16 */;
        margin:.9375rem /* 15/16 */ .9375rem /* 15/16 */ 0 .9375rem /* 15/16 */;
        .title{
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #101D34;
            line-height: 50px;
        }
        .surplus{
            div{
                p{
                    margin:0;
                    span:nth-of-type(2){
                        color:#5E2F88;
                        margin-left:5px;
                    }
                }
            }
        }
        div:not(:last-child){
            border-bottom:1px solid #E5EBEF;
        }
        .surplus,.buy,.day{
            display: flex;
            justify-content: space-between;
        }
        span:nth-of-type(1){
            font-size: .9375rem /* 15/16 */;
            font-family: PingFang SC;
            font-weight: 400;
            color: #49596D;
            line-height: 2.5rem /* 40/16 */;
        }
        span:nth-of-type(2){
            font-size: .9375rem /* 15/16 */;
            font-family: PingFang SC;
            font-weight: 500;
            color: #101D34;
            line-height: 2.5rem /* 40/16 */;
        }
    }
}
</style>